<template>
	<h3>根据数组渲染列表</h3>
	<div v-for='(item,index) in arrList' :key='index'>
		<p>元素的值为：{{item}}********其索引为：{{index}}</p>
	</div>
	
	<h3>根据对象数组渲染列表</h3>
	<div v-for='(fruit,index) in objList' :key='index'>
		<p>元素的值为：{{fruit.fruitname}}********其索引为：{{index}}</p>
	</div>
</template>
<script setup>
	import { reactive } from 'vue'

	//根据数组渲染列表
	//使用v-for（根据list数组中的元素）渲染列表后，
	//当在list数组中删除一个元素后，index会发生变化，v-for会重新渲染列表，导致性能下降。
	//为了给v-for一个提示，以便它能跟踪每个节点的身份，从而对现有元素进行重用和重新排序，
	//建议通过key属性为列表中的每一项提供具有唯一性的值
	//定义数据
	const arrList=reactive(["苹果","李","香蕉","草莓"])
	
	const objList=reactive([
		{id:1,fruitname:'苹果',price:4.98},
		{id:2,fruitname:'李',price:6.98},
		{id:3,fruitname:'香蕉',price:8.98},
		{id:4,fruitname:'草莓',price:24.98}
	])
</script>

<style>
</style>